<template>
  <div class="main-layout">
    <nav-bar />
    <div class="main-content">
      <router-view></router-view>
    </div>
    <footer-bar />
  </div>
</template>

<script setup>
import NavBar from "@/components/common/NavBar.vue";
import FooterBar from "@/components/common/FooterBar.vue";
</script>

<style lang="scss" scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  .main-content {
    flex: 1;
    padding-top: 60px; // 为导航栏留出空间
  }
}
</style> 